<template>
  <div>
    <div class="header">
      <div class="header-center">
        <h1 class="logo-h1">
          <a :href="currentCity.prefixUrl" class="logo">
            <img
              src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221116/95b8b68307394cc082d9cc682fa9fa60.png"
              alt="✖✖✖✖✖✖✖✖✖✖"
              title="✖✖✖✖✖✖✖✖✖✖"
              class="logo-cover"
            />
          </a>
          <!-- <a :href="currentCity.prefixUrl" class="logo-text" title="✖✖✖✖✖✖✖✖✖✖">
            <p class="p">✖✖✖✖✖✖✖✖✖✖</p>
            <p class="small">买房便宜 卖房专业</p>
          </a> -->
        </h1>
        <div class="city-position city-tip">
          <div class="city-choice" v-show="cityChangeShow||currentCity.cityName">
            <span class="text">{{ currentCity.cityName }}</span>
            <a href="https://mfgjw.com">[ 切换城市 ]</a>
            <!-- <span class="el-icon-arrow-down"></span> -->
          </div>
          <div class="city-change-list-new" v-show="fadeStyle">
            <div class="top2"></div>
            <ul class="city-list-new">
              <li
                v-for="(item, index) in cityList"
                :key="index"
                :class="item.length ? '' : 'city-list-title'"
              >
                {{ item.letter }}
                <ul class="city-list-rows clearfix" v-if="item.length">
                  <li v-for="(ite, ind) in item" :key="ind">
                    <a
                      :href="`${
                        ite.aliases
                          ? `https://${ite.aliases}.mfgjw.com${pathname}`
                          : 'https://www.mfgjw.com'
                      }`"
                    >{{ ite.shortName }}</a>
                  </li>
                </ul>
              </li>
              <li class="tips">
                <i></i>
                <span>其他城市陆续开放</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="tel">
          <p>咨询热线：{{currentCity.t400Num}}</p>
          <p>维权渠道：✖✖✖✖✖✖✖✖✖✖</p>
        </div>
        <!-- 右边 -->
        <div class="logon-status">
          <div class="user-set">
            <!--登录状态显示手机号-->
            <div class="user-option">
              <span class="el-icon-user" v-show="loginShow"></span>
              <a
                href="javascript:void(0);"
                id="login"
                class="login_new link-login julive_pc_login_quick"
                @click="dialogVisible = true"
                v-if="!userInfo"
                v-show="loginShow"
              >登录</a>
              <!--登录后-->
              <div class="user-phone" v-if="userInfo">
                <a href="javascript:void(0);">{{ userInfo.mobile2 }}</a>
                <div class="exit">
                  <a href="javascript:void(0);" @click="loginOut">退出登录</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="header-app">
          <span class="icon-wrap header-app-box">
            <i class="el-icon-mobile"></i>
            <span>下载APP</span>
          </span>
          <div class="QR-warp">
            <div class="qr-notice">下载✖✖✖✖✖✖✖✖✖✖APP</div>
            <div class="qr-text">购房返现金</div>
            <img
              class="qr-img lazy-timeout-click"
              src="https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211123/a9e0b886f5724e1db0280ba45bb77718.png"
              alt="APP"
            />
          </div>
        </div> -->
        <!-- 搜索功能 -->
        <div class="search" v-if="searchShow">
          <div class="search-wrap">
            <div class="search-area">
              <div class="btn-v5 btn-search" @click="headerSearchState = true">
                <span class="icon el-icon-search" style="display: inline-block"></span>
                <span class="btn-search-icon" style="display: inline-block">搜索</span>
                <div class="search-focus" v-show="headerSearchState">
                  <div class="focus-top search-input-box">
                    <input
                      class="search-input"
                      type="text"
                      autocomplete="off"
                      placeholder="请输入楼盘名、区域"
                      data-input-type="nature"
                      data-position-name="header"
                      data-default-value
                      v-model="headerSearch"
                      @input="searchChange"
                    />
                    <button type="button" @click.stop="headerFixedSearchBtn">
                      <span class="icon icon-search-2 el-icon-search"></span>
                      <span>搜索</span>
                    </button>
                  </div>
                  <div class="s-list-wrap-new">
                    <div class="default-list" v-show="headerSearchStateClick">
                      <div class="search-hotList-wrap" v-if="headerSearchHotState">
                        <div class="hot-search-wrap">
                          <!-- 热门搜索开始 -->
                          <div class="hot-box">
                            <div class="tip">
                              <span>热门搜索</span>
                            </div>
                            <ul class="s-list-new clearfix">
                              <li v-for="(item, index) in searchLabelList" :key="index">
                                <a
                                  class="hot"
                                  :href="currentCity.prefixUrl + item.href"
                                >{{ item.name }}</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <!--搜索列表开始-->
                      <div class="search-list-wrap" v-if="headerSearchListState">
                        <div class="tip search-tips">
                          <span>
                            为您找到与“
                            <span>{{ headerSearch }}</span>”有关的新房
                          </span>
                        </div>
                        <!--暂无数据开始-->
                        <div class="no-data-search" v-show="searchListShow">
                          <p>未找到符合您条件的搜索内容</p>
                        </div>
                        <!--暂无数据结束-->
                        <div class="search-list-header">
                          <ul>
                            <li class="clearfix" v-for="(item, index) in searchList" :key="index">
                              <a
                                target="_self"
                                class="clearfix"
                                :href="`${currentCity.prefixUrl}/lpxq/${item.estateId}.html`"
                              >
                                <div class="search-list-left">
                                  {{ item.name
                                  }}
                                  <span>{{ item.regionName || "" }}</span>
                                </div>
                                <div class="search-list-right">
                                  <span>
                                    {{
                                    item.meterPrice
                                    ? `单价约${item.meterPrice}元/m²`
                                    : "售价待定"
                                    }}
                                  </span>
                                  <span class="button" :class="item.saleStatusClass">
                                    {{
                                    item.saleStatus == 0
                                    ? "待售"
                                    : item.saleStatus == 1
                                    ? "在售"
                                    : "售罄"
                                    }}
                                  </span>
                                </div>
                              </a>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <!--搜索列表结束-->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  -->
        <ul class="menu">
          <li class="first-m">
            <a :href="currentCity.prefixUrl">首页</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/lpcx/`" target="_blank">{{currentCity.cityName}}楼盘查询</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/lpzx/hyxw/`" target="_blank">{{currentCity.cityName}}楼盘资讯</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/dtzf/`" target="_blank">地图找房</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/mfzc/`" target="_blank">免费专车</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 悬浮头部 -->
    <div class="header-v5 header-v5-2 header-v5-2-fixed index1-1-fixed" :style="scrollStyle">
      <div class="inn clearfix">
        <div class="inn-p">
          <div class="logo">
            <a :href="currentCity.prefixUrl" class="logo-cover">
              <img
                src="https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221116/95b8b68307394cc082d9cc682fa9fa60.png"
                alt="✖✖✖✖✖✖✖✖✖✖"
                title="✖✖✖✖✖✖✖✖✖✖"
              />
            </a>
            <!-- <a :href="currentCity.prefixUrl" class="logo-text" title="✖✖✖✖✖✖✖✖✖✖">
              <p class="p">✖✖✖✖✖✖✖✖✖✖</p>
              <p class="small">买房便宜 卖房专业</p>
            </a> -->
          </div>
        </div>
        <!--右边-->
        <div class="menu-right">
          <div class="search-wrap">
            <input
              type="text"
              placeholder="请输入楼盘名称、区域"
              class="julive_search_project julive_search_project_top"
              data-target="_blank"
              autocomplete="off"
              v-model="headerSearch"
            />
            <button type="button" @click="headerFixedSearchBtn">
              <span class="icon el-icon-search"></span>
            </button>
          </div>
          <div class="tel">
            <p>咨询热线：{{currentCity.t400Num}}</p>
            <p>维权渠道：✖✖✖✖✖✖✖✖✖✖</p>
          </div>
        </div>
        <!--菜单-->
        <ul class="menu">
          <li>
            <a :href="`${currentCity.prefixUrl}/lpcx/`" target="_blank">{{currentCity.cityName}}楼盘查询</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/lpzx/hyxw/`" target="_blank">{{currentCity.cityName}}楼盘资讯</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/dtzf/`" target="_blank">地图找房</a>
          </li>
          <li>
            <a :href="`${currentCity.prefixUrl}/mfzc/`" target="_blank">免费专车</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 登录弹窗 -->
    <el-dialog custom-class="login-dialog" top="0" width="400px" :visible.sync="dialogVisible">
      <div class="quick-login">
        <span class="ly-close"></span>
        <h4 class="title">手机快捷登录</h4>
        <h5 class="sub-title">未注册手机号将自动创建账号</h5>
        <div class="phone-wrap">
          <input
            type="text"
            placeholder="请输入手机号"
            class="phone-number julive_quick_login_phone"
            maxlength="11"
            v-model="phone"
          />
          <span class="phone-error julive_quick_login_phone_error_msg">
            {{
            regLogin.phoneTitle
            }}
          </span>
        </div>
        <div class="code-wrap">
          <input
            placeholder="请输入短信验证码"
            type="text"
            class="phone-code julive_quick_login_code"
            maxlength="6"
            v-model="code"
          />
          <div class="btn-wrap">
            <span class="phone-error julive_quick_login_code_error_msg">
              {{
              regLogin.codeTitle
              }}
            </span>
            <button
              class="acquire julive_quick_login_get_code"
              @click="getCode"
              :disabled="codeDisabled"
            >{{ codeTitle }}</button>
          </div>
        </div>
        <div class="error-wrap julive_quick_login_user_error_msg">{{ regLogin.agreenTitle }}</div>
        <el-button
          type="primary"
          class="btn-quick-login"
          :disabled="loginDisabled"
          @click="loginBtn"
        >登录</el-button>
        <div class="privacy-agreement julive_quick_login_privacy">
          <p>
            <el-checkbox
              class="icon julive_quick_login_privacy_select"
              :checked="agreenChecked"
              @change="agreenChange"
            ></el-checkbox>
            <i>我已阅读并同意</i>
            <a :href="`${currentCity.prefixUrl}/yszc.html`" target="_blank">《✖✖✖✖✖✖✖✖✖✖用户隐私政策》</a>
            <i>及</i>
            <a
              class="treaty"
              :href="`${currentCity.prefixUrl}/fwxy.html`"
              target="_blank"
            >《✖✖✖✖✖✖✖✖✖✖用户服务协议》</a>
          </p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import u from '@/plugins/Ccom'
export default {
  props: {
    currentCity: Object,
    cityList: Array,
    loginType: {
      type: String,
      default: ''
    },
    cityChangeShow: {
      type: Boolean,
      default: true
    },
    loginShow: {
      type: Boolean,
      default: true
    }
  },
  head() {
    return {}
  },
  data() {
    return {
      fadeStyle: false,
      scrollStyle: 'opacity: 0',
      headerSearch: '',
      searchShow: false, // 头部搜索所有元素
      headerSearchState: false, // 头部搜索展示框显示或隐藏
      headerSearchStateClick: true, // 头部搜索展示框显示或隐藏
      headerSearchHotState: true, // 头部搜索 热门搜索
      headerSearchListState: false, // 头部搜索 搜索结果列表
      searchLabelList: [
        {
          name: '万科',
          href: '/lpcx/o1',
        },
        {
          name: '返现',
          href: '/lpcx/o2',
        },
        {
          name: '交通便利',
          href: '/lpcx/o3',
        },
        {
          name: '免费专车',
          href: '/lpcx/o4',
        },
        {
          name: '学区房',
          href: '/lpcx/o5',
        },
        {
          name: '融创',
          href: '/lpcx/o6',
        },
        {
          name: '医院',
          href: '/lpcx/o7',
        },
      ],
      searchListShow: false,
      searchList: [],
      dialogVisible: false,
      phone: '',
      code: '',
      codeTitle: '获取验证码',
      donwTime: 60,
      regLogin: {
        phoneTitle: '',
        codeTitle: '',
        agreenTitle: '',
      },
      codeDisabled: false,
      agreenChecked: false,
      userInfo: null,
      loginDisabled: false,
      pathname: '',
    }
  },
  mounted() {
    // 追加城市切换后路径的参数
    this.updatePathname()
    // 根目录头部搜索按钮下不显示
    this.searchShow = location.pathname !== '/'
    // 获取用户信息
    let getUserInfo = localStorage.getItem('userInfo')
    this.userInfo = getUserInfo ? JSON.parse(getUserInfo) : null
    // 监听页面滚动条
    window.addEventListener('scroll', this.getScroll)
    // 监听页面上点击事件
    document.addEventListener('click', (e) => {
      if (e.target.offsetParent) {
        this.headerSearchState =
          e.target.offsetParent.className != 'search-wrap' &&
          e.target.offsetParent.className != 's-list-wrap-new' &&
          e.target.offsetParent.className != 'search-focus'
            ? false
            : true
      }
    })
  },
  methods: {
    // 追加城市切换后路径的参数
    updatePathname() {
      var nowPathname = location.pathname.substr(
        0,
        location.pathname.lastIndexOf('/') + 1
      )
      switch (nowPathname) {
        case '/lpxq/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqxx/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqxc/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqhx/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqdt/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqpt/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqhxxq/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqwd/':
          this.pathname = '/lpcx/'
          break
        case '/lpxqwdxq/':
          this.pathname = '/lpcx/'
          break
        case '/lpzxxq/':
          this.pathname = '/lpzx/hyxw/'
          break
        case '/nwwdxq/':
          this.pathname = '/nwwd/'
          break
        default:
          this.pathname = nowPathname
      }
    },
    // 切换城市
    fadeChange(state) {
      this.fadeStyle = state ? true : false
    },
    // 监听页面滚动
    getScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop

      this.scrollStyle = scrollTop > 70 ? 'opacity: 1;z-index: 1000' : ''
      this.headerSearchState = scrollTop > 70 ? true : false // 滚动大于70隐藏搜索框
      this.headerSearchStateClick = scrollTop > 70 ? false : true
    },
    // 悬浮搜索按钮
    headerFixedSearchBtn() {
      location.href = this.headerSearch
        ? `${this.currentCity.prefixUrl}/lpcx/?kwname=${this.headerSearch}`
        : `${this.currentCity.prefixUrl}/lpcx/`
    },
    // 搜索内容发生改变
    searchChange() {
      this.headerSearchHotState = this.headerSearch ? false : true
      this.headerSearchListState = this.headerSearch ? true : false

      // 搜索
      u.http({
        client: true,
        url: '/pc/houseInfo/querySearchHouseInfoList',
        params: {
          host: location.host,
          name: this.headerSearch,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.searchListShow =
            this.headerSearch && res.data.total < 1 ? true : false
          // 设置背景色
          res.data.list.forEach((item) => {
            item.saleStatusClass =
              item.saleStatus == 0
                ? 'lbs-ds'
                : item.saleStatus == 1
                ? 'lbs-zs'
                : 'lbs-sq'
          })
          this.searchList = res.data.list
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
        return false
      })
    },
    // 获取验证码
    getCode() {
      if (!this.phone) {
        this.regLogin.phoneTitle = '请输入手机号码'
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.regLogin.phoneTitle = '请输入正确的手机号'
        return false
      }
      this.regLogin.phoneTitle = ''
      this.regLogin.codeTitle = ''
      this.codeDisabled = true // 禁止重复点击
      let t = this.donwTime
      this.codeTitle = `${t}s重新获取`
      let downTimeInte = setInterval((e) => {
        t--
        this.codeTitle = `${t}s重新获取`
        if (t <= 0) {
          this.codeTitle = '重新获取'
          t = this.donwTime
          this.codeDisabled = false
          clearInterval(downTimeInte)
        }
      }, 1000)
      u.http({
        client: true,
        url: '/app/sms/loginCode',
        params: {
          phone: this.phone,
          countryCode: '86',
        },
      })
        .then((res) => {
          if (res.code != 200) {
            this.$message({
              message: res.msg,
              type: 'error',
            })
          }
        })
        .catch((err) => {
          this.$message({
            message: res.msg,
            type: 'error',
          })
        })
    },
    // 勾选协议
    agreenChange() {
      this.agreenChecked = !this.agreenChecked
    },
    // 登录
    loginBtn() {
      this.regLogin.phoneTitle = ''
      this.regLogin.codeTitle = ''
      this.regLogin.agreenTitle = ''
      if (this.phone == '') {
        this.regLogin.phoneTitle = '请输入手机号码'
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.regLogin.phoneTitle = '请输入正确的手机号'
        return false
      }
      if (this.code == '') {
        this.regLogin.codeTitle = '请填写验证码'
        return false
      }
      if (!this.agreenChecked) {
        this.regLogin.agreenTitle = '请阅读并勾选协议后在登录'
        return false
      }
      this.loginDisabled = true
      u.http({
        client: true,
        url: '/app/user/login',
        params: {
          type: 2,
          phone: this.phone,
          code: this.code,
        },
      }).then((res) => {
        if (res.code == 200) {
          localStorage.setItem('token', res.data.token)
          this.getUserInfo()
          // 确定回调
          this.$emit('closeChange', this.loginType)
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error',
        })
        this.loginDisabled = false
      })
    },
    // 获取用户信息
    getUserInfo() {
      u.http({
        client: true,
        url: '/app/user/getUserInfo',
        method: 'GET',
        headers: {
          token: localStorage.getItem('token') || '',
        },
      }).then((res) => {
        if (res.code == 200) {
          // 修改手机号
          res.data.mobile2 = res.data.mobile.replace(
            /(\d{3})\d{4}(\d{4})/,
            '$1****$2'
          )
          localStorage.setItem('userInfo', JSON.stringify(res.data))
          this.userInfo = res.data
          this.dialogVisible = false
        }
      })
    },
    // 退出登录
    loginOut() {
      localStorage.removeItem('userInfo')
      localStorage.removeItem('token')
      this.userInfo = null
    },
  },
}
</script>